<template>
    <div class="table">
        <div class="container">
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelectTab">
                <el-menu-item index="1">启用中</el-menu-item>
                <el-menu-item index="2">已停用</el-menu-item>
                <el-button @click="form.show=true,form.title='新建'" class="addButton">新建</el-button>
            </el-menu>
            <el-table :data="data" border class="table" ref="multipleTable" @selection-change="handleSelectionChange">
                <el-table-column prop="id" label="ID" width="80" align="center">
                    <!-- sortable -->
                </el-table-column>
                <el-table-column prop="name" label="角色名称" width="180" align="center">
                    <!-- sortable -->
                </el-table-column>
                <el-table-column prop="address" label="权限模块">
                    <!-- sortable -->
                </el-table-column>
                <el-table-column label="操作" width="180" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" icon="el-icon-setting" @click="configViewpoint = true">配置</el-button>
                        <el-button type="text" icon="el-icon-edit" @click="form.show=true,form.title='编辑'">编辑</el-button>
                        <el-button type="text" icon="el-icon-warning" @click="delVisible = true" v-if="activeIndex==1">停用</el-button>
                        <el-button type="text" icon="el-icon-success" @click="delVisible = true" v-if="activeIndex==2">启用</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination background @current-change="handleCurrentChange" layout="prev, pager, next" :total="100">
                </el-pagination>
            </div>
            <!-- 停用启用的提示框 -->
            <el-dialog title="提示" :visible.sync="delVisible" width="300px" center>
                <div class="del-dialog-cnt">{{activeIndex==1 ?'是否确定停用？' : '是否确定启用？'}}</div>
                <span slot="footer" class="dialog-footer">
	                <el-button @click="delVisible = false">取 消</el-button>
	                <el-button type="primary" @click="deleteRow">确 定</el-button>
	            </span>
            </el-dialog>
            <!-- 新增编辑的弹框 -->
            <fromTypeDialog ref="fromData" @on-input="clickUpData" :value="form" :columns="formColumns"></fromTypeDialog>
            <el-dialog title="管理" :visible.sync="configViewpoint" width="800px" center>
                <div class="del-dialog-cnt" style="text-align: left;">
                    <el-table :data="data" border class="table" ref="multipleTable" @selection-change="handleSelectionChange" height="280">
                        <el-table-column prop="id" label="用户ID" width="80" align="center">
                            <!-- sortable -->
                        </el-table-column>
                        <el-table-column prop="name" label="用户名称" width="180" align="center">
                            <!-- sortable -->
                        </el-table-column>
                        <el-table-column prop="address" label="权限模块">
                            <!-- sortable -->
                        </el-table-column>
                        <el-table-column label="操作" width="180" align="center">
                            <template slot-scope="scope">
                                <el-button type="text" icon="el-icon-delete" @click="">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div style="margin-top:15px">
                        <el-input placeholder="请输入内容" v-model="addUser" clearable style="width: 500px;">
                            <template slot="prepend">添加用户</template>
                        </el-input>
                        <el-button type="primary">确定</el-button>
                    </div>
                </div>
                <span slot="footer" class="dialog-footer">
	                <el-button @click="configViewpoint = false">取 消</el-button>
	                <el-button type="primary" @click="editViewBtn">保 存</el-button>
	            </span>
            </el-dialog>
        </div>
    </div>
</template>
<script>
import fromTypeDialog from '../../../encapsulation/from-type-dialog';
import { list } from '@/service/serviceLcm';
export default {
    name: 'roleManage',
    components: {
        fromTypeDialog
    },
    data() {
        return {
            url: '../../../../../static/vuetable.json',
            tableData: [],
            cur_page: 1,
            del_list: [],
            delVisible: false,
            editViewpoint: false,
            configViewpoint: false,
            activeIndex: '1', //tab默认
            eidtTit: '编辑',
            addUser: '',
            form: {
                checkList: [],
                name: '',
                show: false,
                title: '提示',
                width:'800px'
            },
            formColumns:[{
                title: '角色名称',
                key: 'name',
                type: 'text',
                required: true,
            },{
                title: '权限模块',
                key: 'checkList',
                type: 'check',
                required: true,
                ckeckNum:6,
                checkArr:[
                    { name: '资讯管理' },
                    { name: '融资服务' },
                    { name: '项目管理' },
                    { name: '擂台管理' },
                    { name: '问题管理' },
                    { name: '观点管理' },
                    { name: '漂流瓶管理' },
                    { name: '用户管理' },
                    { name: '邀请处理' },
                    { name: '标签管理' },
                    { name: '马甲管理' },
                    { name: '系统消息' },
                    { name: '角色管理' }
                ]
            },]
        }
    },
    created() {
        this.getData();
    },
    computed: {
        data() {
            return this.tableData.filter((d) => {
                let is_del = false;
                for (let i = 0; i < this.del_list.length; i++) {
                    if (d.name === this.del_list[i].name) {
                        is_del = true;
                        break;
                    }
                }
                if (!is_del) {
                    return d;
                }
            })
        }
    },
    methods: {
        // 编辑和新增的提交
        editViewBtn() {
            console.log(this.form)
        },
        // 分页导航
        handleCurrentChange(val) {
            this.cur_page = val;
            this.getData();
        },
        // 获取 easy-mock 的模拟数据
        getData() {
            // this.$axios.get(this.url, {
            //     page: this.cur_page
            // }).then((res) => {
            //     this.tableData = res.data.list;
            // })
            list(this.cur_page).then(data => {
                this.tableData = data.list;
            })
        },
        handleSelectTab(index) {
            this.activeIndex = index;
        },
        handleSelectionChange(val) { //表格选中
            this.multipleSelection = val;
        },
        // 确定删除
        deleteRow() {
            this.$message.success('执行成功！');
            this.delVisible = false;
        },
        clickUpData(data) {
            console.log(data)
        },
    }
}

</script>
<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}

.del-dialog-cnt {
    font-size: 16px;
    text-align: center
}

.table {
    width: 100%;
    font-size: 14px;
}

.red {
    color: #ff0000;
}

.addButton {
    float: right;
    margin-top: 15px;
}

.handleMore {
    float: right;
}

</style>
